<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/jsp/common/taglibs.jsp"%>

<!DOCTYPE html>
<html>
<head>
<title>security system</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="<c:url value="/resources/css/axure_rp_page.css"></c:url>"
	type="text/css" rel="stylesheet">
<link
	href="<c:url value="/Home_files/axurerp_pagespecificstyles.css"></c:url>"
	type="text/css" rel="stylesheet">
<link rel="stylesheet"
	href="<c:url value="/css/bootstrap.min.css"></c:url>">

</head>
<body>
	<nav class="navbar navbar-inverse" role="navigation">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header" style="margin:10px;">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">UUC Bioengineering Ltd.</a>
		</div>
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1" style="margin:10px;">
			<ul class="nav navbar-nav">
				<li class="active"><a
					href="<s:url namespace="/security" action="homeAction"/>">Dynamical Map</a></li>
				<li><a
					href="<s:url namespace="/security" action="loadLogAction"/>">Access
						Log</a></li>
				<li><a
					href="<s:url namespace="/security" action="loadErrorReportAction"/>">Error
						Handle</a></li>
				<li><a
					href="<s:url namespace="/security" action="loadFireReportAction"/>">Fire Alarm</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right" style="margin-right:20px;">
				<li><a href="#">${loginedAdmin.admin_ID}</a></li>
				<li><a href="#">${loginedAdmin.admin_Username}</a></li>
				<li><a href="#">Security Administrator</a></li>
				<li><a
					href='<s:url namespace="/system" action="adminLogout"></s:url>'>Log
						out</a></li>
			</ul>
		</div>
		<!-- /.navbar-collapse -->
	</nav>
	<div class="container">
		<div class="row">
			<div class="col-lg-offset-2">
				<h2>Dynamic Map</h2>
			</div>
		</div>
		<div class="row">
			<DIV class="main_container">

				<DIV id=u0_container class="u0_container">
					<DIV id="u0_img" class="u0_original"></DIV>
					<DIV id=u1 class="u1">
						<DIV id=u1_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u2_container class="u2_container">
					<DIV id="u2_img" class="u2_original"></DIV>
					<DIV id=u3 class="u3">
						<DIV id=u3_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u4_container class="u4_container">
					<DIV id="u4_img" class="u4_original"></DIV>
					<DIV id=u5 class="u5">
						<DIV id=u5_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u6_container class="u6_container">
					<DIV id="u6_img" class="u6_original"></DIV>
					<DIV id=u7 class="u7">
						<DIV id=u7_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u8_container class="u8_container">
					<DIV id="u8_img" class="u8_original"></DIV>
					<DIV id=u9 class="u9">
						<DIV id=u9_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u10_container class="u10_container">
					<DIV id="u10_img" class="u10_original"></DIV>
					<DIV id=u11 class="u11">
						<DIV id=u11_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u12_container class="u12_container">
					<DIV id="u12_img" class="u12_original"></DIV>
					<DIV id=u13 class="u13">
						<DIV id=u13_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u14_container class="u14_container">
					<DIV id="u14_img" class="u14_original"></DIV>
					<DIV id=u15 class="u15">
						<DIV id=u15_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u16_container class="u16_container">
					<DIV id="u16_img" class="u16_original"></DIV>
					<DIV id=u17 class="u17">
						<DIV id=u17_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u18_container class="u18_container">
					<DIV id="u18_img" class="u18_original"></DIV>
					<DIV id=u19 class="u19">
						<DIV id=u19_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u20_container class="u20_container">
					<DIV id="u20_img" class="u20_original"></DIV>
					<DIV id=u21 class="u21">
						<DIV id=u21_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u22_container class="u22_container">
					<DIV id="u22_img" class="u22_original"></DIV>
					<DIV id=u23 class="u23">
						<DIV id=u23_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u24_container class="u24_container">
					<DIV id="u24_img" class="u24_original"></DIV>
					<DIV id=u25 class="u25">
						<DIV id=u25_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u26_container class="u26_container">
					<DIV id="u26_img" class="u26_original"></DIV>
					<DIV id=u27 class="u27">
						<DIV id=u27_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u28_container class="u28_container">
					<DIV id="u28_img" class="u28_original"></DIV>
					<DIV id=u29 class="u29">
						<DIV id=u29_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u30_container class="u30_container">
					<DIV id="u30_img" class="u30_original"></DIV>
					<DIV id=u31 class="u31">
						<DIV id=u31_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u32_container class="u32_container">
					<DIV id="u32_img" class="u32_original"></DIV>
					<DIV id=u33 class="u33">
						<DIV id=u33_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u34_container class="u34_container">
					<DIV id="u34_img" class="u34_original"></DIV>
					<DIV id=u35 class="u35">
						<DIV id=u35_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u36_container class="u36_container">
					<DIV id="u36_img" class="u36_original"></DIV>
					<DIV id=u37 class="u37">
						<DIV id=u37_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u38_container class="u38_container">
					<DIV id="u38_img" class="u38_original"></DIV>
					<DIV id=u39 class="u39">
						<DIV id=u39_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u40_container class="u40_container">
					<DIV id="u40_img" class="u40_original"></DIV>
					<DIV id=u41 class="u41">
						<DIV id=u41_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u42_container class="u42_container">
					<DIV id="u42_img" class="u42_original"></DIV>
					<DIV id=u43 class="u43">
						<DIV id=u43_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u44_container class="u44_container">
					<DIV id="u44_img" class="u44_original"></DIV>
					<DIV id=u45 class="u45">
						<DIV id=u45_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u46_container class="u46_container">
					<DIV id="u46_img" class="u46_original"></DIV>
					<DIV id=u47 class="u47">
						<DIV id=u47_rtf>&nbsp;</DIV>
					</DIV>
				</DIV>
				<DIV id=u48_line class="u48_line" style="background-color:red;">
				</DIV>

				<DIV id=u49_line class="u49_line" style="background-color:red;"></DIV>

				<DIV id=u50_line class="u50_line" style="background-color:red;"></DIV>

				<DIV id=u51_line class="u51_line" style="background-color:red;"></DIV>

				<DIV id=u52_line class="u52_line" style="background-color:red;"></DIV>

				<DIV id=u53_line class="u53_line" style="background-color:red;"></DIV>



				<INPUT id=u54 type=submit class="btn btn-success" value="UC101">

				<INPUT id=u55 type=submit class="btn btn-success" value="UC201">

				<INPUT id=u57 type=submit class="btn btn-success" value="UC203">

				<INPUT id=u58 type=submit class="btn btn-success" value="UC202">

				<INPUT id=u59 type=submit class="btn btn-success" value="UC206">

				<INPUT id=u60 type=submit class="btn btn-success" value="UC205">

				<INPUT id=u61 type=submit class="btn btn-success" value="UC204">

				<INPUT id=u62 type=submit class="btn btn-success" value="UC303">

				<INPUT id=u63 type=submit class="btn btn-success" value="UC207">

				<INPUT id=u64 type=submit class="btn btn-success" value="UC301">

				<INPUT id=u65 type=submit class="btn btn-success" value="UC208">

				<INPUT id=u66 type=submit class="btn btn-success" value="UC408">

				<INPUT id=u67 type=submit class="btn btn-success" value="UC302">

				<INPUT id=u68 type=submit class="btn btn-success" value="UC405">

				<INPUT id=u69 type=submit class="btn btn-success" value="UC406">

				<INPUT id=u70 type=submit class="btn btn-success" value="UC407">

				<INPUT id=u71 type=submit class="btn btn-success" value="UC403">

				<INPUT id=u72 type=submit class="btn btn-success" value="UC404">

				<INPUT id=u73 type=submit class="btn btn-success" value="UC402">

				<INPUT id=u74 type=submit class="btn btn-success" value="UC401">



				<DIV id=u75 class="u75">
					<DIV id=u75_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">Meeting
								Room</span>
						</p>
					</DIV>
				</DIV>
				<DIV id=u76 class="u76">
					<DIV id=u76_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">Toilets</span>
						</p>
					</DIV>
				</DIV>
				<DIV id=u77 class="u77">
					<DIV id=u77_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">Reception
								Area</span>
						</p>
					</DIV>
				</DIV>
				<DIV id=u78 class="u78">
					<DIV id=u78_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">Main
								Entrance</span>
						</p>
					</DIV>
				</DIV>
				<DIV id=u79 class="u79">
					<DIV id=u79_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">Car
								Park</span>
						</p>
					</DIV>
				</DIV>
				<DIV id=u80 class="u80">
					<DIV id=u80_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">Research
								Support</span>
						</p>
					</DIV>
				</DIV>
				<DIV id=u81 class="u81">
					<DIV id=u81_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">General
								Administration</span>
						</p>
					</DIV>
				</DIV>
				<DIV id=u82 class="u82">
					<DIV id=u82_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">Corridor
								A</span>
						</p>
					</DIV>
				</DIV>
				<DIV id=u83 class="u83">
					<DIV id=u83_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">Corridor
								B</span>
						</p>
					</DIV>
				</DIV>
				<DIV id=u84 class="u84">
					<DIV id=u84_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">Corridor
								C</span>
						</p>
					</DIV>
				</DIV>
				<DIV id=u85 class="u85">
					<DIV id=u85_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">Corridor
								C</span>
						</p>
					</DIV>
				</DIV>
				<DIV id=u86 class="u86">
					<DIV id=u86_rtf>
						<p style="text-align:left;">
							<span
								style="font-family:Arial;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">Secure
								Research&nbsp; Areas</span>
						</p>
					</DIV>
				</DIV>
			</DIV>
			<DIV class=preload></DIV>
		</div>
		<div class="row" style="margin-top:580px;margin-bottom:30px;">
			<div class="col-lg-offset-2">
				<button class="btn btn-success disabled">Door NO.</button>
				<label style="margin-right:10px;">Door closed</label>
				<button class="btn btn-warning disabled">Door No.</button>
				<label style="margin-right:10px;">Door opening</label> <img
					alt="FireExit" src="<c:url value="/img/fireExit.jpg"></c:url>">
				<label style="margin-right:120px;">FireExit</label>
				<button class="btn btn-danger" data-placement="right"
					data-toggle="tooltip" type="button"
					data-original-title="Open all fire Exits!">Fire Alarm</button>

			</div>


		</div>
	</div>

	<script src="<c:url value="/js/jquery-1.9.1.min.js"></c:url>"></script>
	<script src="<c:url value="/js/bootstrap.min.js"></c:url>"></script>
	<script src="<c:url value="/js/security.js"></c:url>"></script>
	<script type="text/javascript">
		$(document)
				.ready(
						function() {

							$(".btn-success")
									.click(
											function() {
												$(this).removeClass(
														"btn-success");
												$(this).addClass("btn-warning");
												var doorNo;
												doorNo = $(this).attr("value");
												if (confirm("Are you sure to open door "
														+ doorNo + " ?")) {

													alert("Door number "
															+ doorNo
															+ " is open now!");
													location.href = '<s:url namespace="/security" action="update"/>?door.door_ID='
															+ doorNo;
												}
											});

							$(".btn-danger").tooltip("show");
						});

		$(".btn-danger")
				.click(
						function() {
							if (confirm("Are you sure to open all doors?")) {

								alert("doors are all open now!");
								location.href = '<s:url namespace="/security" action="updateAll"/>';
							}
						});
	</script>
</body>
</html>
